<template>
    <div class="prop-detail-content">
        <div class="ads-left-con">
            <div class="name">{{dtData.name}}</div>
            <div class="introduce">{{dtData.subtitle}}</div>
            <!-- <div class="pricelocation">
                <div class="price">
                    <img src="/images/bicon1.png" alt="">
                    <b>0.2923</b>（$3000.00）
                </div>
                <div class="location">
                    <i class="iconfont icon-ditu-dibiao"></i>
                    [location address]
                </div>
            </div> -->
            <!-- <Title>Belonging City</Title>
            <div class="itemcon1">City‘’s name</div> -->
            <div class="chiyou">
                <div class="cyItem1">
                    <div class="picon"><label>Holder：</label><span>name</span></div>
                </div>
                <!-- <div class="cyItem2">
                    <div class="picon"><label>Contract Address:</label><span>{{dtData.ownerAddress || '--'}}</span></div>
                </div> -->
            </div>
            <!-- <div class="vioc">
                <two-title text='View Information On The Chain' @click="showFlag=true"/>
                <my-dailog v-model:show="showFlag" :styleType="3" :showtopclose="true">
                    <div class="propVisitsDgWrap">
                        <div class="propDgTitle">Chain Information</div>
                        <div class="propVisitsDgMain">
                            <chain-info/>
                        </div>
                    </div>
                </my-dailog>
            </div> -->
            <Title>Value analysis of advertising space</Title>
            <div class="introduce introduce2">{{dtData.valueAnalysis}}</div>
            <Title>Prop Visits</Title>
            <div class="daoju-visits-box" v-if="dtData.arPropId">
                <uv-pv-visits :id="dtData.arPropId" visitType='7'/>
            </div>
            <!-- <div class="vioc">
                <two-title text='View The Traffic Contribution Of Each Item' @click="showFlag2=true"/>
                <my-dailog v-model:show="showFlag2" :styleType="3" :showtopclose="true">
                    <div class="propVisitsDgWrap">
                        <div class="propDgTitle">Total number of props placed: <em>100</em></div>
                        <div class="propVisitsDgMain">
                            <prop-visits/>
                        </div>
                    </div>
                </my-dailog>
            </div> -->
        </div>
        <div class="ads-right-con">
            <div class="ads-swiper-box">
                <img-box :imgs="[dtData.headerImageUrl]"/>
            </div>
            <div class="name">{{dtData.name}}</div>
            <div class="introduce">{{dtData.subtitle}}</div>
            <div class="pricelocation">
                <div class="price">
                    <span><img src="/images/bicon1.png" alt=""></span> 
                    <b>0.2923</b>（$3000.00）
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance ,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Title from '@/components/title.vue'
import twoTitle from '@/components/twoTitle.vue'
import imgBox from '@/components/imgBox.vue'
import chainInfo from '@/components/chainInfo.vue'
import propVisits from './propVisits.vue'
import uvPvVisits from '@/components/uvPvVisits.vue'
export default {
    components:{
       Title,
       twoTitle,
       imgBox,
       chainInfo,
       propVisits,
       uvPvVisits
    },
    props:{
        detail:Object,
        id:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showFlag:false,
            showFlag2:false,
            dtData:props.detail || {}
        })
        onMounted(()=>{
            if(props.id){
                store.dispatch('ad/get_prop_detail',props.id).then(res=>{
                    state.dtData = res
                })
            }
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .prop-detail-content{
        display: flex;
        width: 100%;
        height: 100%;
        line-height: normal;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        overflow: hidden;
        overflow-x: auto;
        .introduce{
            padding: 6px 0 0 0;
            &.introduce2{
                padding-bottom: 20px;
            }
        }
        .pricelocation{
            display: flex;
            height: 80px;
            align-items: center;
            .price{
                flex: 1;
                img{
                    display: block;
                    float: left;
                    width: 20px;
                    margin: 3px 10px 0 0;
                }
                b{
                    font-weight: 500;
                    color: #82FEF4;
                }
            }
            .location{
                i{
                    float: left;
                    font-size: 30px;
                    margin: 3px 10px 0 0;
                }
            }
        }
        .ads-left-con{
            width: 740px;
            flex-shrink: 0;
            overflow: hidden;
            overflow-y: auto;
            padding: 10px 20px;
            flex-shrink: 0;
            .name{
                font-size: 28px;
            }
            
            
            .itemcon1{
                display: flex;
                align-items: center;
                height: 60px;
                background: rgba(12,132,217,0.5000);
                color: #82FEF4;
                padding: 0 20px;
                margin: 3px 0 0 0;
            }
            .chiyou{
                display: flex;
                padding: 20px 0 0 0;
                overflow: hidden;
                .cyItem1{
                    padding: 0 20px 0 0;
                    flex-shrink: 0;
                }
                .cyItem2{
                    flex: 1;
                    flex-shrink: 0;
                }
            }
            .picon{
                display: flex;
                align-items: center;
                height: 60px;
                background: rgba(103,248,255,0.2000);
                padding: 0 20px;
                label{
                    color: #A5CEE9;
                }
                span{
                    flex: 1;
                    text-align: right;
                }
            }
            .vioc{
                padding: 20px 0;
            }
            .daoju-visits-box{
               padding:20px 0 30px 0;
            }
        }
        .ads-right-con{
            display: block;
            flex: 1;
            flex-shrink: 0;
            padding:70px 20px 20px 20px;
            overflow: hidden;
            overflow-y: auto;
            flex-shrink: 0;
            .ads-swiper-box{
                width: 100%;
                height: 320px;
                background: #A5CEE9;
            }
            .name{
               font-size: 28px;
               text-align: center; 
               padding: 20px 0 0 0;
            }
            .pricelocation{
                .price{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        float: none;
                    }
                }
            }
        }
    }

    .propVisitsDgWrap{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        .propDgTitle{
            height: 60px;
            line-height: 60px;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 26px;
            em{
                font-style: normal;
                color: #7EE7FF;
                font-weight: 700;
            }
        }
        .propVisitsDgMain{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
    
</style>